import { defineComponent, toRefs, ref, computed, PropType } from "vue";
import { useState } from '@src/modules/trigger/hooks/useVC.ts'
import NodeSelectExec from '@src/modules/trigger/components/ProcessNodeChart/components/nodeSelectExec.tsx'
/* utils */
import state from '@src/modules/trigger/view/setting/util/state.js'
import dayjs from 'dayjs'
/* type */
import type { ProcessNodeListItem } from '@src/modules/trigger/model/interface/index.ts'
import { NodeTypeEnum, AllNodeType } from '@src/modules/trigger/model/enum/index.ts'
import { ConditionOperator, ConditionValue} from '@src/modules/trigger/model/enum/condition.ts'
import '@src/modules/trigger/components/ProcessNodeChart/style/nodeContent.scss'

export default defineComponent({
    name: 'nodeExecuteContent',
    props: {
        nodeData: {
            type: Object as PropType<ProcessNodeListItem>,
            default: () =>({})
        },
        currentNodeType: {
            type: String as PropType<AllNodeType>,
            default: ''
        }
    },
    setup(props) {
        const { nodeData } = toRefs(props)
        const [isShow, setIsShow] = useState(true)

        const isShowType = computed(() => {
            if (props.currentNodeType && props.currentNodeType === 'message') {
                return 'message'
            }
            // 这个code显示地方有三个，一个是条件里面的code，还有一个是code节点，还有一个是执行应用的code
            if (nodeData.value.options.convertType === 'code'
                || (props.currentNodeType && props.currentNodeType === 'code')
            ) {
                return 'code'
            }
            // 如果是条件节点，就显示条件
            if (props.currentNodeType === NodeTypeEnum.CONDITION_NODE) {
                return NodeTypeEnum.CONDITION_NODE
            }
        })
        const isShowSelect = computed(() => {
            return !!nodeData.value.options.appName
        })

        const findFormFieldList = (enName: string, data: any) => {
            if (!data) return null;
            for (const item of data) {
                if (item.enName === enName) {
                    return item;
                }
                if (item.children) {
                    const found = findFormFieldList(enName, item.children);
                    if (found) {
                        return found;
                    }
                }
            }
            return null;
        }

        /**
         * @description 条件内容文本
         */
        const conditionText = () => {
            // 如果这是新建条件的时候，通过设置这个
            if (nodeData.value.content) {
                return nodeData.value.content
            }
            try {
                if (nodeData.value.options?.conditionList && nodeData.value.options?.conditionList.length > 0) {
                    return nodeData.value.options?.conditionList.map((item: any) => {
                        return item.map((item2: any) => {
                            if (!item2.valueType) {
                                return '请设置'
                            }
                            if (item2.fieldType && item2.fieldType === 'user') {
                                return item2?.toCnName + item2?.operateName +  
                                ((Array.isArray(item2?.value) && (item2.value[0] == '' || item2.value.length == 0)) ?
                                 '' : 
                                 item2?.valueTypeName) 
                                 + ((Array.isArray(item2?.value) && item2.value.length != 0) && JSON.parse(item2?.value).map(i => i.name).join(','))
                            }
                            if (['date', 'datetime'].includes(item2.fieldType)) {
                                let timer = item2.value.map(i => dayjs(i).format('YYYY-MM-DD')).join('至')
                                return item2?.toCnName + item2?.operateName +  (item2.value[0] === '' ? '' : item2?.valueTypeName) + timer
                            }
                            if (item2.valueType == '3') {
                                return item2?.toCnName + item2?.operateName + item2?.valueName
                            }
                            return item2?.toCnName + item2?.operateName +  
                                ((Array.isArray(item2?.value) && (item2.value[0] == '' || item2.value.length == 0)) ?
                                 '' : 
                                 item2?.valueTypeName) 
                                 + item2?.value.map((i: any) => i).join(',')
                        }).filter((i: any) => !!i).join('/')
                    }) || '请设置'
                }
            } catch (error) {
                console.log(error)
            }

            return '请设置'
        } 
        
        /**
         * @description 获取代码信息
         */
        const getCodeInfo = () => {
            if ((props.currentNodeType && props.currentNodeType === 'code')) {
                return (nodeData.value.options?.fieldOptions && nodeData.value.options?.fieldOptions.convertCode) || '请设置'
            }
            return nodeData.value.options && nodeData.value.options.convertCode || ''
        }

        /**
         * @description 消息通知文案
         */
        const getMessageInfo = () => {
            const opt = nodeData.value.options
            if (opt && opt.fieldOptions) {
                if (opt.fieldOptions.side === 0) {
                    return '内部通知'
                } else if (opt.fieldOptions.side === 1) {
                    return '外部通知'

                }
            } else {
                return '消息通知'
            }
        }


        const nodeSelectHandler = () => {
            console.log('nodeSelectHandler')
        }

        return () => (
            <div class="node-content">
                {
                    isShowType.value === 'message' ? (
                        <div class={'condition_text'}>
                            {getMessageInfo()}
                            </div>
                    ) : isShowType.value === 'code' ? (
                        <div class={'condition_text'}>
                            <span>{getCodeInfo()}</span>
                        </div>
                    ) : isShowType.value === NodeTypeEnum.CONDITION_NODE ? (
                        <div class={'condition_text'}>
                            {conditionText()}
                        </div>
                    ) :
                        (
                            !isShowSelect.value ? (
                                <div class="process-text">
                                    请选择<span class="process__cicle">应用对象</span>和<span class="process__text">执行动作</span>
                                </div>
                            ) : (
                                <NodeSelectExec options={nodeData.value.options}/>
                            ) 
                        )
                    
                }
                
            </div>
        )
    }
})